<html>
<head>
  <title>Memory: The Bluetooth, RFID &amp; Flickr variant ;-)</title>
  
  <script src="/memory/settings.js"></script>
  <script>document.write('<script src="' + DOJO_PATH + '/dojo/dojo.js"></scr' + 'ipt>')</script>
  <script>
  polling = new function() {
    dojo.require('dojo.io.script');
    var interval;
    
    this.start = function() {
      interval = setInterval(
        function() {
          dojo.io.script.get({ url: POLL_FILE, callbackParamName: 'callback' }).addCallback(callback);
        },
        POLL_INTERVAL
      );
    };
    
    this.stop = function() {
      clearInterval(interval);
    };
  };
  
  polling.start();
  
  function callback(data) {
    // console.log(dojo.toJson(data));
    
    switch (data.status) {
      case 'starting':
        dojo.byId('board').style.display = 'none';
        display('Starting Memory. Please wait.');
        break;
      case 'finished':
        dojo.byId('board').style.display = 'block';
        display('You finished Memory. Excellent!');
        render(data);
        break;
      case 'playing':
        dojo.byId('board').style.display = 'block';
        display(document.title);
        render(data);
        break;
    }
  }
  
  function display(msg) {
    dojo.byId('status').innerHTML = msg;
  }
  
  function render(data) {
    renderTag('tag1', data.tag1);
    renderTag('tag2', data.tag2);
  }
  
  function renderTag(id, tag) {
    if (tag && dojo.byId(id).tag == tag.tag) return;
    
    id = '#' + id;
    dojo.query(id + ' .display')[0].style.display = tag ? 'block' : 'none';
    dojo.query(id + ' .placeholder')[0].style.display = tag ? 'none' : 'block';
    
    dojo.query(id)[0].tag = tag ? tag.tag : null;
    if (tag) {
      dojo.query(id + ' .credit')[0].innerHTML = tag.photo.user;
      dojo.query(id + ' .display .photo')[0].innerHTML = '<img src="' + tag.photo.url + '">';
    }
  }
  </script>
  
  <style type="text/css" media="screen">
    body {
      font-family: Helvetica, Arial, sans-serif;
      color: #999;
      background: #FFF;
      margin: 25px;
    }
    
    div.firebug { display: none !important; }
    
    h1 {
      font-size: 24px;
      font-weight: bold;
      color: #FF0084;
    }
    
    p {
      font-size: 16px;
      text-align: center;
    }
    
    .credit {
      color: #0063DC;
    }
    
    .credit-holder {
      font-size: 11px;
    }
    
    .placeholder {
      margin-top: 100px;
    }
    
    .placeholder .photo {
      margin-bottom: 25px;
    }
    
    #board {
      width: 900px;
      border-right: 10px solid #999;
    }
    
    #tag1, #tag2 {
      width: 375px;
    }
    
    #tag1 {
      float: left;
    }
    
    #tag2 {
      float: right;
    }
  </style>
</head>

<body>
  <h1 id="status">Starting Memory. Please wait.</h1>
  
  <div id="board" style="display:none;">
    <div id="tag1">
      <div class="placeholder">
        <p class="photo"><img src="rfid.png" width="150"></p>
        <p>Please place a tag on the reader</p>
      </div>
      <div class="display">
        <p class="photo"></p>
        <p class="credit-holder">Photo by: <span class="credit"></span></p>
      </div>
    </div>
    <div id="tag2">
      <div class="placeholder">
        <p class="photo"><img src="rfid.png" width="150"></p>
        <p>Please place a tag on the reader</p>
      </div>
      <div class="display">
        <p class="photo"></p>
        <p class="credit-holder">Photo by: <span class="credit"></span></p>
      </div>
    </div>
  </div>
</body>
</html>